import React from "react";
import { BrowserRouter, Route, Routes, NavLink, HashRouter } from "react-router-dom";
import route from './route.js'
import style from './Router.css'

export default class Demo2 extends React.Component {
    constructor(prop) {
        super(prop);
        this.state = {
            nav: [
                { menuName: '首页', menuUrl: '/' },
                { menuName: '新闻', menuUrl: '/news' },
                { menuName: '关于我们', menuUrl: '/aboutus' },
            ],
        }
    }

    render() {
        return (
            <div>
                <BrowserRouter>
                <ul class="nav" >
                    {
                        this.state.nav.map((item, index) => {
                            return <li> <NavLink key={item.menuUrl} to={item.menuUrl}
                                className={(obj) => obj.isActive ? 'active' : ''}
                            >{item.menuName}</NavLink></li>
                        })
                    }
                  </ul>

                    <Routes> 
                        {route.map((item, index) =>{
                            if(item.children){

                            return <Route path={item.path} key={item.path} element={<item.element children={item.children}  />}></Route>
                        
                            }else {
                                return <Route path={item.path} key={item.path} element={<item.element   />}></Route>
                            }
                        }) 
                        }
                        
                    </Routes>
                </BrowserRouter>
            </div>
        )
    }
}